<template>
  <div class="grid-container">
    <img :src="currentImageUrl" alt="Current Image" class="grid-item"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        'https://tse1-mm.cn.bing.net/th/id/OIP-C.zded-V8mEWmqegl9sYocmAHaE0?rs=1&pid=ImgDetMain',
        'https://ts1.cn.mm.bing.net/th/id/R-C.ba0d4d1067f63e735c6f0cadac7db86a?rik=te%2bNVR4%2b7Yu7cA&riu=http%3a%2f%2fwww.cldol.com%2fnewbrand%2fupload%2f201209031655028627.png&ehk=yhLNl%2bAA9gFH42LcC3Mfm3QJJAuPjgzlRRnuQLtWdb8%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1'
        // 如果有更多图片，可以继续添加到这里
      ],
      currentIndex: 0,
      name: '四川省院士工作站',
      fileNumber: '川组通[2020]31号',
      batch: '四川省第九批院士工作站',
      date: '2020年11月17日'
    };
  },
  computed: {
    currentImageUrl() {
      return this.images[this.currentIndex];
    }
  },
  methods: {
    changeImage() {
      this.currentIndex = (this.currentIndex + 1) % this.images.length;
    }
  },
  mounted() {
    // 创建一个间隔定时器，在组件挂载后每隔3秒（3000毫秒）更换一次图片
    this.imageInterval = setInterval(this.changeImage, 3000);
  },
  beforeDestroy() {
    // 清除定时器，防止内存泄漏
    clearInterval(this.imageInterval);
  }
};
</script>



<style scoped>
.grid-container {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 2%;
}

.grid-item {
  width: 100%; /* 图片宽度 */
  height: auto;
}
</style>
